import { RefObject, useEffect, useState } from "react";

interface Size {
	width: number;
}

const useSize = (target: RefObject<HTMLElement>): Size => {
	const [size, setSize] = useState<Size>({ width: 0 });

	useEffect(() => {
		const handleResize = () => {
			if (target.current) {
				setSize({ width: target.current.offsetWidth });
			}
		};

		handleResize();

		window.addEventListener("resize", handleResize);
		return () => window.removeEventListener("resize", handleResize);
	}, [target]);

	return size;
};

export default useSize;
